<template>
  <div class="nav-dialog">
    <el-dialog v-model="isShow" width="30%">
      <template v-if="showFlag === 1">
        <h2>QQ</h2>
      </template>
      <template v-else-if="showFlag === 2">
        <h2>WeiChat</h2>
      </template>
      <template v-else-if="showFlag === 3">
        <p>
          <i class="icon-wendang"></i>
        </p>
      </template>

      <template v-else-if="showFlag === 4">
        <h2>时间</h2>
        <iframe
          frameborder="0"
          width="100%"
          src="/page/run-time/index.html"
        ></iframe
      ></template>
      <i class="icon-yiqiguang"></i>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "NavDialog",
  setup() {
    const isShow = ref(false);
    const showFlag = ref(1);
    return { isShow, showFlag };
  }
});
</script>

<style lang="less" scoped>
.nav-dialog {
  padding: 10px 10px;
  img {
    width: 100%;
  }
  i {
    font-family: "iconfont";
    font-size: 25px;
  }
  b {
    font-size: 18px;
    margin-left: 10px;
  }
  a {
    color: #57606a;
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
